<template>
  <view class="container">
    <S1Header title="报表中心" :on-back="navigateBack" />
    <view class="list">
      <view v-for="(item, index) in items" :key="index" class="list-item">
        <view class="left">
          <view class="icon-wrapper" :style="{ backgroundColor: item.iconBgColor }">
            <image class="icon" :src="item.icon" />
          </view>
        </view>
        <view class="content">
          <view class="item-title">
            {{ item.title }}
          </view>
          <view class="item-subtitle">
            {{ item.subtitle }}
          </view>
          <view class="tags">
            <view
              v-for="(tag, tIndex) in item.tags" :key="tIndex" class="tag"
              :style="{ backgroundColor: tag.bgColor, color: tag.textColor }"
            >
              <text>{{ tag.text }}</text>
            </view>
          </view>
        </view>
        <view class="right">
          <view v-if="item.hasRedDot" class="red-dot" />
          <image class="right-icon" src="https://ceshiweb.picaime.com/static/images/report/right.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import S1Header from '@/components/S1Header.vue';

interface Tag {
  text: string;
  bgColor: string;
  textColor: string;
}

interface ListItem {
  icon: string;
  iconBgColor: string;
  title: string;
  subtitle: string;
  tags: Tag[];
  hasRedDot: boolean;
}

const items = ref<ListItem[]>([
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon1.png',
    iconBgColor: '#fef7e7',
    title: '经营总览',
    subtitle: '查看经营数据总览，收支、收款、库存、成本、利润等',
    tags: [
      { text: '收支', bgColor: '#e0f5e0', textColor: '#00b510' },
      { text: '收款', bgColor: '#e7effe', textColor: '#007aff' },
      { text: '库存', bgColor: '#fff5e0', textColor: '#f5a623' },
      { text: '利润统计', bgColor: '#ffe0e0', textColor: '#f54343' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon2.png',
    iconBgColor: '#e7effe',
    title: '日报表',
    subtitle: '查看日报表数据的详细信息，收款、成本数据等',
    tags: [
      { text: '收款', bgColor: '#e7effe', textColor: '#007aff' },
      { text: '成本数据', bgColor: '#fff5e0', textColor: '#f5a623' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon3.png',
    iconBgColor: '#e7effe',
    title: '日销售订单明细表',
    subtitle: '查看日销售订单详细信息',
    tags: [
      { text: '订单详情', bgColor: '#e7effe', textColor: '#007aff' },
      { text: '销售统计', bgColor: '#e0f5e0', textColor: '#00b510' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon4.png',
    iconBgColor: '#e7effe',
    title: '商品销量统计表',
    subtitle: '查看各类商品的销售数量统计',
    tags: [
      { text: '销量统计', bgColor: '#e0f5e0', textColor: '#00b510' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon5.png',
    iconBgColor: '#fef7e7',
    title: '异常操作记录表',
    subtitle: '查看异常操作记录详细信息',
    tags: [
      { text: '异常记录', bgColor: '#ffe0e0', textColor: '#f54343' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon1.png',
    iconBgColor: '#e7fee9',
    title: '代客收货表',
    subtitle: '查看代客收货相关数据统计',
    tags: [
      { text: '代收统计', bgColor: '#e0f5e0', textColor: '#00b510' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon2.png',
    iconBgColor: '#fcf4ec',
    title: '数次费用表',
    subtitle: '按次收费的相关费用统计表',
    tags: [
      { text: '费用统计', bgColor: '#fff5e0', textColor: '#f5a623' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon3.png',
    iconBgColor: '#fcf4ec',
    title: '白条记录表',
    subtitle: '查看白条相关记录信息',
    tags: [
      { text: '白条记录', bgColor: '#fff5e0', textColor: '#f5a623' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon4.png',
    iconBgColor: '#fcecec',
    title: '购买统计表',
    subtitle: '查看买家购买统计数据',
    tags: [
      { text: '购买统计', bgColor: '#fee7e7', textColor: '#ff0000' },
    ],
    hasRedDot: false,
  },
  {
    icon: 'https://ceshiweb.picaime.com/static/images/report/icon5.png',
    iconBgColor: '#ecf9fc',
    title: '还款记录',
    subtitle: '查看买家还款记录详情',
    tags: [
      { text: '还款记录', bgColor: '#e7effe', textColor: '#007aff' },
    ],
    hasRedDot: false,
  },
]);

const navigateBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 100vh;
}

.list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.left {
  margin-right: 20rpx;
}

.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
}

.icon {
  width: 80rpx;
  height: 80rpx;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
}

.item-subtitle {
  font-size: 24rpx;
  color: rgba(154, 156, 161, 1);
  font-weight: 500;
  margin-top: 10rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tag {
  border-radius: 4rpx;
  padding: 8rpx 12rpx;
  font-size: 20rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.right {
  display: flex;
  align-items: center;
}

.red-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: red;
  border-radius: 50%;
  margin-right: 8rpx;
}

.right-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
